<template>
  <div>
    <div id="main" style="width: 1100px;height:350px;">技能排行榜</div>
    <div id="educationPie" style="width: 1100px;height:350px;">学历分布</div>
    <div id="salaryLine" style="width: 1100px;height:350px;">学历与薪资</div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'jiqiecharts',
  mounted() {
    // 初始化技能排行榜的图表
    var myChart = echarts.init(document.getElementById('main'));
    fetch("http://127.0.0.1:5000/AISkillEcharts")
        .then((response) => response.json())
        .then((data) => {
          myChart.setOption({
            title: {
              text: '技能排行榜top10'
            },
            tooltip: {},
            xAxis: {
              data: data.X
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '技能频次',
                type: 'bar',
                data: data.Y
              }
            ]
          });
        });

    // 初始化学历分布的饼图
    var educationChart = echarts.init(document.getElementById('educationPie'));
    fetch("http://127.0.0.1:5000/getAIEducationEcharts")
        .then((response) => response.json())
        .then((educationData) => {
          educationChart.setOption({
            title: {
              text: '学历分布',
              subtext: 'Fake Data',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '学历频次',
                type: 'pie',
                radius: '50%',
                data: educationData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          });
        });
    var salaryChart = echarts.init(document.getElementById('salaryLine'));
    fetch("http://127.0.0.1:5000/getAIEduAndSalaryEcharts")
        .then((response) => response.json())
        .then((salaryData) => {
          salaryChart.setOption({
            title: {
              text: '学历与薪资'
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: salaryData.X
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '平均薪资',
                type: 'line',
                data: salaryData.Y
              }
            ]
          });
        });
  }
}
</script>
